<!DOCTYPE html>
<html lang="en">
<head>
    <title>DOOM Captcha</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" href="favicon.ico"/>

    <link rel="prefetch" href="static/pisga0.png" />
    <link rel="prefetch" href="static/shotgun.gif" />
    <link rel="prefetch" href="static/sound/music2.mp3" />
    <link rel="prefetch" href="static/sound/dspistol.wav" />
    <link rel="prefetch" href="static/sound/dsdshtgn.wav" />
    <link rel="prefetch" href="static/sound/ok.mp3" />
    
    <link rel="prefetch" href="static/sound/1_kill.wav" />
    <link rel="prefetch" href="static/sound/2_kill.wav" />
    <link rel="prefetch" href="static/sound/3_kill.wav" />
    <link rel="prefetch" href="static/sound/4_kill.wav" />
    <link rel="prefetch" href="static/sound/5_kill.wav" />
    <link rel="prefetch" href="static/sound/6_kill.wav" />

    <link rel="prefetch" href="static/sound/1_kill.wav" />
    <link rel="prefetch" href="static/sound/2_kill.wav" />
    <link rel="prefetch" href="static/sound/3_kill.wav" />
    <link rel="prefetch" href="static/sound/4_kill.wav" />
    <link rel="prefetch" href="static/sound/5_kill.wav" />
    <link rel="prefetch" href="static/sound/6_kill.wav" />

    <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
</head>
<body>

<style>

* {
    font-family: 'VT323', monospace;
    text-transform: uppercase;
    font-size: 30px;
    color: white;

    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                    supported by Chrome, Edge, Opera and Firefox */
}

body {
    overflow-x: hidden;
    background: black url('static/backgrounds/1.png');
    background-size: cover;
    background-position: top center;
    touch-action: pan-x pan-y;
    background-repeat:no-repeat;
    width: 100%;
    height: 100%;
    cursor: url(static/cursor2.png) 16 16, default !important;
}

button{background:none;border:1px #fff solid;color:#fff;cursor:pointer;margin-top:17px;}

#start, #ok{cursor:default;}

#btn_again{display:block;margin-top:0;border:0;}

#cheatcode {
    cursor: url(static/cursor2.png), default !important;
}

.enemy{
    cursor: url(static/cursor3.png) 16 16, default!important;
    top:50%;
    margin-top:-57px;
    background-repeat:no-repeat;
    background-size:100%;
    background-position:center bottom;
    image-rendering: pixelated;


}
</style>

<div id="start" style="font-size:20px;z-index:4;color:white;background:black;position:fixed;left:0;top:0;width:100%;height:100%;display:flex;text-align:center;justify-content: center;align-items: center;">
    <div>
        <div style="display:block;color:red">kill <span id="max_kills" style="color:red">4</span> enemies</div>
        click to start
        <br>
        <button id="btn_start"><svg style="margin-bottom:-7px;margin-right:10px;" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-volume-up-fill" viewBox="0 0 16 16">
            <path d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z"/>
            <path d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z"/>
            <path d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06z"/>
          </svg>ON</button> &nbsp; 
        <button id="btn_start_mute"><svg style="margin-bottom:-7px;margin-right:10px;" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-volume-mute-fill" viewBox="0 0 16 16">
            <path d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zm7.137 2.096a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0z"/>
          </svg>OFF</button>
    </div>
</div>

<div id="gameover" style="font-size:20px;z-index:4;color:white;background:black;position:fixed;left:0;top:0;width:100%;height:100%;display:none;text-align:center;justify-content: center;align-items: center;">
    <div>
        <div style="display:block;color:red">game over</div>
        click to restart
    </div>
</div>

<div id="game" style="position:fixed;height:100%;width:100%;left:0px;top:0px;" onclick="handleMiss(event, this);">
    <div class="enemy" style="display:none;z-index:1;position:fixed;left:120px;"></div>

    <div id="gun" style="pointer-events:none;z-index:2;background:url('static/pisga0.png');background-position:left bottom;background-repeat:no-repeat;width:100%;height:100px;position:fixed;left:0;bottom:-10px;"></div>

    <table id="countdown" cellpadding="0" cellspacing="0" border="0" style="display:none;z-index:2;position:fixed;left:0;bottom:0;width:100%;height:7px;"><td id="percent" bgcolor="red" width="100%"></td><td bgcolor="black"></td></table>
</div>

<div id="ok" style="cursor:default;display:none;z-index:3;color:white;background:#31AE33;position:fixed;left:0;top:0;width:100%;height:100%;text-align:center;justify-content: center;align-items: center;">
    <div>
    <svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="currentColor" class="bi bi-check-lg" viewBox="0 0 16 16">
        <path d="M13.485 1.431a1.473 1.473 0 0 1 2.104 2.062l-7.84 9.801a1.473 1.473 0 0 1-2.12.04L.431 8.138a1.473 1.473 0 0 1 2.084-2.083l4.111 4.112 6.82-8.69a.486.486 0 0 1 .04-.045z"/>
    </svg>
    <button id="btn_again">Play again?</button>
    </div>
</div>

<audio id="sound_music" loop>
    <source src="static/sound/music2.mp3" type="audio/mp3">
</audio>

<audio id="sound_shoot">
    <source src="static/sound/dspistol.wav" type="audio/wav">
</audio>

<audio id="sound_shootshotgun">
    <source src="static/sound/dsdshtgn.wav" type="audio/wav">
</audio>

<audio id="sound_ok">
    <source src="static/sound/ok.mp3" type="audio/mp3">
</audio>

<audio id="sound_death" src="" type="audio/wav">
</audio>

<input id="cheatcode" autocomplete="off" style="display:none;text-align:center;position:fixed;z-index:99;top:0;left:0;width:100%;font-size:20px;color:black;opacity:0;">

<script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
var screen_width;
var screen_height;
var total_backgrounds = 4;
var total_enemies = 6;
var enemy_width = 62;
var enemy_height = 89;
var total_kills = 0;
var max_kills = 0;
var default_kills = 4;
var sound_on;
var countdown = document.location.href.indexOf('countdown=on') > -1;
var is_shoot = false;
var time_seconds;
var current_time;
var timer_game;
var idkfa = false;
var id_enemy;
var images_preload = [];
var flash = false;

document.getElementById("sound_death").volume = 0.5;
document.getElementById("sound_shootshotgun").volume = 0.5;

if (document.location.href.indexOf('enemies') > -1) {
    max_kills = parseInt(document.location.href.split('enemies=')[1].split('&')[0]);
}

if( max_kills < 1 ){
    max_kills = default_kills;
}

time_seconds = max_kills * 2;
current_time = time_seconds;

function handleShootAnim() {
    flash = true;
    if (!idkfa) {
        playSound('shoot');
        $('#gun').css('background', 'rgba(0, 0, 0, 0) url("static/pistol-flash.png") no-repeat scroll left bottom');
        $('#gun').css('left',"-=22");
    } else {
        playSound('shootshotgun');
        $('#gun').css('background', 'rgba(0, 0, 0, 0) url("static/shotgun-flash.png") no-repeat scroll left bottom');
        //$('#gun').css('left',"-=33");
        $('#gun').css('bottom',"0px");
    }
    setTimeout(function() {
        flash = false;
        if (!idkfa) {
            $('#gun').css('background', 'rgba(0, 0, 0, 0) url("static/pisga0.png") no-repeat scroll left bottom');
            $('#gun').css('left',"+=22");
        } else {
            $('#gun').css('background', 'rgba(0, 0, 0, 0) url("static/sht2a0.png") no-repeat scroll left bottom');
            //$('#gun').css('left',"+=33");
            $('#gun').css('bottom',"-10px");
        }
    }, 200);
}

function handleMiss(event, element){
    if (event.target != element) {
        event.stopPropagation();
        return;
    }

    handleShootAnim();
}

$('.enemy').click(function() {
    if (!is_shoot) {
        is_shoot = true;

        handleShootAnim();

        if (sound_on) {
            $('#sound_death').attr("src", "static/sound/" + id_enemy + "_kill.wav");
            $('#sound_death')[0].play();
        }
        $('.enemy').css('background-image', "url('static/enemies/" + id_enemy + "_dead.png')");
        

        total_kills++;

        setTimeout(function() {
            $('.enemy').fadeOut('fast', function() {

                setTimeout(function() {
                    if (total_kills != max_kills) {
                        showEnemy();
                    }
                    is_shoot = false;
                }, 100);

            });
        }, 200);

        setTimeout(function() {
            if (total_kills == max_kills) {
                endGame();
            }
        }, 500);
    }
});

function endGame() {
    $('#start').hide();
    $('#ok').css('display', 'flex');
    playSound('ok');
    $('#sound_music')[0].pause();
    postSize(1);
    $('#cheatcode').css('opacity',0);
    if (timer_game) {
        clearTimeout(timer_game);
    }
}

function randomNumber(min, max) {
    if (min > max) {
        let temp = max;
        max = min;
        min = temp;
    }

    if (min <= 0) {
        return Math.floor(Math.random() * (max + Math.abs(min) + 1)) + min;
    } else {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
}

function showEnemy() {
    id_enemy = randomNumber(1, total_enemies);
    $('.enemy').css('background-image', "url('static/enemies/" + id_enemy + "_normal.png')").css('left', randomNumber(0, screen_width-enemy_width)).show();
}

function postSize(height) {
    var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);

    target.postMessage(height, "*");
}

function startGame() {
    $('#cheatcode').show().val('').focus();

    showEnemy();
    setRandomBackground();

    if (countdown) {
        $('#countdown').show();

        timer_game = setInterval(function() {
            current_time -= 0.125;

            if (current_time <= 0 && total_kills != max_kills) {
                $('#gameover').css('display','flex');

                clearInterval(timer_game);
            } else {
                time_percent = parseInt((current_time * 100) / time_seconds);

                $('#percent').css('width', time_percent + '%');
            }
        }, 125);
    }
}

$('#btn_start').click(function() {
    $('#start').hide();
    sound_on = true;
    playSound('music');
    startGame();
});

$('#btn_start_mute').click(function() {
    $('#start').hide();
    sound_on = false;
    startGame();
});

$('#btn_again').click(function() {
    $('#ok').hide();
    if (sound_on) {
        playSound('music');
    }
    $('#gameover').click();
});


$('#gameover').click(function() {
    current_time = time_seconds;
    $(this).hide();
    $('#percent').css('width', '100%');
    total_kills = 0;
    startGame();
});

function playSound(id) {
    if (sound_on) {
        $('#sound_' + id)[0].currentTime = 0;
        $('#sound_' + id)[0].play();
    }
}

$(window).resize(function() {
    screen_width = $(window).width();
    screen_height = $(window).height();
});

$(window).resize();

$('#cheatcode').keyup(function() {
    if ($(this).css('opacity', 1).val().toUpperCase() == 'IDDQD') {
        $('#cheatcode').val('').hide();
        $('#gameover').hide();
        endGame();
    }
    if ($(this).css('opacity', 1).val().toUpperCase() == 'IDKFA') {
        idkfa = true;
        document.getElementById("gun").style.backgroundImage='url("static/sht2a0.png"';
        $('#cheatcode').val('').hide();
    }
});

function setRandomBackground(){
    $('body').css('background-image', "url('static/backgrounds/" + randomNumber(1, total_backgrounds) + ".png')" );
}

$(function() {
    $('#sound_shoot')[0].volume = 0.3;
    $('#sound_music')[0].volume = 0.3;
    $('#sound_ok')[0].volume = 0.3;
    $('#max_kills').html(max_kills);
    $('.enemy').css('width',enemy_width).css('height',enemy_height);


    for (var i = 1; i <= total_backgrounds; i++) {
        var image_aux = new Image();
        image_aux.src = 'static/backgrounds/' + i + '.png';
        images_preload.push(image_aux); 
    }

    for (var i = 1; i <= total_enemies; i++) {
        var image_aux = new Image();
        image_aux.src = 'static/enemies/' + i + '_normal.png';
        images_preload.push(image_aux); 

        image_aux = new Image();
        image_aux.src = 'static/enemies/' + i + '_dead.png';
        images_preload.push(image_aux); 
    }


});

document.addEventListener('mousemove', evt => {
    let x = evt.clientX;

    if (!idkfa) {
        if (!flash) {
            $('#gun').css('left', (x-34)+"px");
        } else {
            $('#gun').css('left', (x-56)+"px");
        }
    } else {
        $('#gun').css('left', (x-33)+"px");
    }
});
</script>

</body>
</html>
